<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical transparent-menu"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    popper-effect="customized"
    router
    active-text-color="blue"
  >
    <el-menu-item index="/home">
      <el-icon>
        <Reading />
      </el-icon>

      <template #title>
        <i class="bigger-text">评估系统介绍</i>
      </template>
    </el-menu-item>
    <el-menu-item index="/evaluation">
      <el-icon>
        <icon-menu />
      </el-icon>
      <template #title>
        <i class="bigger-text">完整性与溢流风险评估</i>
      </template>
    </el-menu-item>
    <el-menu-item index="/evaluationResult">
      <el-icon>
        <Collection />
      </el-icon>
      <template #title>
        <i class="bigger-text">历史评估结果查询</i>
      </template>
    </el-menu-item>
    <el-menu-item index="/discussion" v-if="[1, 3].includes(currStatus)">
      <el-icon>
        <DocumentCopy />
      </el-icon>
      <template #title>
        <i class="bigger-text">讨论区</i>
      </template>
    </el-menu-item>
    <!--    <el-menu-item index="5">
      <el-icon>
        <User />
      </el-icon>
      <template #title>
        <router-link to="/mine" class="bigger-text">个人信息</router-link>
      </template>
    </el-menu-item>-->

    <el-menu-item
      index="/expertEvaluationResult"
      v-if="[2].includes(currStatus)"
    >
      <el-icon>
        <Avatar />
      </el-icon>
      <template #title>
        <i class="bigger-text">专家智慧诊断 </i>
      </template>
    </el-menu-item>

    <!--    <el-menu-item index="/precinctRecords" v-if="[3].includes(currStatus)">-->
    <!--      <el-icon>-->
    <!--        <MessageBox />-->
    <!--      </el-icon>-->
    <!--      <template #title>-->
    <!--        <i class="bigger-text"-->
    <!--          >辖区评估记录-->
    <!--        </i>-->
    <!--      </template>-->
    <!--    </el-menu-item>-->
    <!--    <el-menu-item index="/manageEmissionFactor" v-if="[4].includes(currStatus)">-->
    <!--      <el-icon>-->
    <!--        <EditPen />-->
    <!--      </el-icon>-->
    <!--      <template #title>-->
    <!--        <i class="bigger-text"-->
    <!--          >排放因子修正-->
    <!--        </i>-->
    <!--      </template>-->
    <!--    </el-menu-item>-->
    <el-menu-item index="/manageUsers" v-if="[4].includes(currStatus)">
      <el-icon>
        <Avatar />
      </el-icon>
      <template #title>
        <i class="bigger-text">用户管理 </i>
      </template>
    </el-menu-item>
    <el-menu-item index="/suggestList" v-if="[4].includes(currStatus)">
      <el-icon>
        <Comment />
      </el-icon>
      <template #title>
        <i class="bigger-text">用户建议 </i>
      </template>
    </el-menu-item>
    <el-menu-item index="/suggest" v-if="[1, 2, 3].includes(currStatus)">
      <el-icon>
        <Message />
      </el-icon>
      <template #title>
        <i class="bigger-text">建议开发者</i>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { computed, ref, inject } from "vue";
import {
  Menu as IconMenu,
  Message,
  Reading,
  Collection,
  DocumentCopy,
  User,
  Avatar,
  MessageBox,
  Comment,
  EditPen,
} from "@element-plus/icons-vue";
import { useUserStore } from "@/store";

const userStore = useUserStore();
// 设置菜单栏可折叠
const isCollapse = inject("isCollapse", ref(false));
// const isExpert = computed(() => userStore.isExpert);
const currStatus = computed(() => userStore.status);

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
  isCollapse.value = false;
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style>
:root {
  --el-menu-item-height: 100px; /* 你希望设置的菜单项高度 */
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 250px;
  /* min-height: 80vh; */
}

.router-link-active {
  text-decoration: none; /* 去除下划线样式 */
  color: red;
}
a {
  text-decoration: none;
  color: black;
}

li {
  height: 2rem;
}

.bigger-text {
  font-size: 1.2em;
}

.transparent-menu {
  background-color: transparent !important;
  line-height: 50px;
}

.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>
